<template>
    <!-- <el-select
        v-model="gradeType"
        placeholder="请选择"
        @change="changeValue"
    >
      <el-option v-for="item in options" :key="item" :label="item.label" :value="item"></el-option>
    </el-select>

    <el-select 
        v-model="grade" 
        placeholder="请选择">
        <el-option v-for="child in childrenList.list" :key="child" :label="child.label" :value="child.value"></el-option>
    </el-select>

    <el-select 
        v-model="grade" 
        placeholder="请选择">
        <el-option v-for="child in childrenList.list" :key="child" :label="child.label" :value="child.value"></el-option>
    </el-select> -->

    <div>
        <span class="demonstration">选择年级</span>
        <el-cascader
            v-model="value"
            :options="options"
            placeholder="请选择"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange">
          </el-cascader>
    </div>
</template>

<script>
import axios from 'axios';

import {ref,reactive,onMounted} from 'vue'

export default {
    name:'SelectGrade',
    setup(props,context){

        let gradeType = ref('');
        let grade = ref('');
        let unit = ref('');

        let options = reactive([])

        // 挂载完成时执行
        onMounted(()=>{
          axios.get('http://localhost:8080/api/word/getGradeList').then(
            response=>{
              options.length = 0

              for (const obj of response.data.data) {
                 
                  var o1 = {value: obj.id ,label: obj.typeName,children:[]}
                for (const sub of obj.gradeList) {
                  
                  var o2 = {value: sub.id ,label: sub.name}
                  o1.children.push(o2)
                }

                options.push(o1)
              }
      
            },error=>{

              console.log('请求失败',error)
            }
          )
        })

        // 把选中的
        function handleChange(value) {
         
          context.emit("sendGrade", value)
       }

    return{
        gradeType,
        grade,
        unit,
        options,
        handleChange
    }
    }
}
</script>

<style scoped>
    div{
        float: right;
        border: 1px solid gray;
        width: 200px;
        height: 80px;
        margin-right: 100px;
    }
</style>